<!-- 登录 -->
<template>
	<view class="container">
		<!-- 背景图 -->
		<view class="bg-box">
			<image class="logo-bg" src="../../static/img/bg_login.png" mode=""></image>
		</view>
		<!-- titleview -->
		<view class="wrapper">
			<view class="head-box">
				<view class="title">广顺考前测试训练系统</view>
			</view>
			<!-- 表单 -->
			<view class="login-box y-f margin" v-show="loginWay === 1">
				<view class="title">登录</view>
				<view class="input-item x-c">
					<!-- <text class="cuIcon-people  margin-right-xs text-lg"></text> -->
					<input class="inp" v-model="userAccount" type="text" placeholder="请输入账号" placeholder-class="pl" />

				</view>
				<view class="input-item x-c">
					<!-- <text class="cuIcon-lock margin-right-xs text-lg"></text> -->
					<input class="inp" password v-model="userPassword" type="text" placeholder="请输入密码"
						placeholder-class="pl" />
						<text class="cuIcon-attentionfavor margin-left-xs"></text>
				</view>
				<!-- 登录按钮 -->
				<view class="x-c y-f">
					<button class="cu-btn login-btn bg-blue mb30" @tap="toLogin">登录</button>
				</view>
				<view class="margin-bottom text-center text-blue" @tap="register">新用户注册</view>
			</view>
			
			<!-- logo -->
			<!-- <view class="x-c">
				<image class="logo" :src="$IMG_URL + '/imgs/logo.png'" mode="widthFix"></image>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {

			return {
				loginWay: 1,
				userAccount: 'trkj',
				userPassword: '123456'
			};
		},
		methods: {
			toLogin(){
				if (!this.userAccount) {
					this.tool.showMsg('请输入账号');
					return false;
				}
				if (!this.userPassword) {
					this.tool.showMsg('请输入密码');
					return false;
				}
				uni.showLoading({
					title: '正在登录...',
					mask: true
				});
				this.tool.request('c=api_Login&m=init&activeUser='+this.userAccount+'&activePwd='+this.userPassword).then(r => {
					if (r.code == '000') {
						uni.setStorageSync('token', r.data.token);
						uni.setStorageSync('name', r.data.name);
						uni.setStorageSync('phone', r.data.phone);
						uni.redirectTo({
							url:'/pages/index/index'
						})
						// uni.navigateBack();
					} else this.tool.showMsg(r.msg);
					uni.hideLoading();
				}).catch(() => {
					uni.hideLoading();
				})
			},
			register(){
				uni.navigateTo({
					url: '/pages/public/register'
				})
			}
		}
	};
</script>

<style lang="scss">
	.container {
		position: relative;
		width: 100vw;
		height: 100vh;
		.bg-box {
			width: 100%;
			position: fixed;
			height: 40vh;
			

			image {
				width: 100%;
				height: 100%;
			}

		}

		// titleview
		.head-box {
			.title {
				font-weight: 600;
				color: #FFFFFF;
				font-size: 50rpx;
				text-align: center;
			}
		}
	}

	.wrapper {
		position: absolute;
		z-index: 90;
		padding-bottom: 40upx;
		padding-top: 100px;
		width: 100vw;
		height: 100vh;
		top: 0;

		.tt-label {
			margin-top: 173rpx;
			text-align: center;
			font-size: 26rpx;
			color: #333333;
		}

		// 登录
		.login-btn {
			width: 630upx;
			height: 80upx;
			// border-radius: 10rpx;
			margin-top: 70upx;
			color: #fff;
			font-size: 32rpx;
		}
		
		// 登录选项卡
		.tab-box {
			margin: 30rpx auto 30rpx;
			width: 608rpx;
		
			.tab-item {
				flex: 1;
				height: 80rpx;
				position: relative;
		
				.tab-title {
					font-size: 32rpx;
					font-weight: bold;
					// color: #845708;
				}
		
				.line-box {
					position: absolute;
					width: 300rpx;
					height: 4rpx;
					background: #920783;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
		
					.triangle {
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						disply: block;
						width: 0;
						height: 0;
						border-width: 10rpx;
						border-style: solid;
						border-color: transparent transparent #920783 transparent;
					}
				}
			}
		}
		
		// 输入
		.login-box {
			margin-top: 80rpx;
			background: #FFFFFF;
			padding-bottom: 30rpx;
			border-radius: 10rpx;
			
			.title{
				text-align: left;
				padding: 20rpx 0;
				font-size: 36rpx;
				display: block;
				width: 608rpx;
				padding-left: 30rpx;
			}
			.input-item {
				height: 90rpx;
				// background: #f5f5f5;
				// border-radius: 500rpx;
				width: 608rpx;
				padding: 0 30rpx;
				margin-top: 10rpx;
				border-bottom: solid 2rpx #ddd;
				
		
				.inp {
					flex: 1;
					height: 100%;
					font-size: 30rpx;
				}
				.cuIcon-attentionfavor{
					font-size: 40rpx;
				}
		
		

			}
		}
	
		
	}
</style>
